<template>
	<view class="plr12 pb15">
		<!-- 预估收益 -->
		<view class="bgWhite plr15 ptb15 radius8 mt12">
			<view class="ft15 bold pb15 bdbe"><text>{{$t('income').预估收益}}</text></view>
			<view class="align-center ptb12">
				<view @click="changeestimate(index,item)" v-for="(item,index) in estimateLists" :key="index"
					:class="{'light bg9D7 bdlight':estimateIndex==index}" class="tc bold ptb3 ft12 mr6  gray9 bgF7"
					style="min-width: 140rpx;border-radius: 8rpx;">
					<text>{{$t('common')[item]}}</text>
				</view>
			</view>
			<view v-if="estimateIndex==0">
				<view class="ft12 gray6">
					<text>{{$t('income').今日收益}}({{$store.state.currency=='CNY'?$t('index').元:$t('index').美元}})</text>
				</view>
				<view class="ft24 bold mt5"><text>{{incomeDetail.day_money |changeCurrency}}</text></view>
				<view class="align-center ft14 gray6 mt10">
					<view style="flex-basis: 60%;">
						<text>{{$t('income').销售额}}：{{ parseFloat(incomeDetail.day_sell || 0).toLocaleString() }}</text>
					</view>
					<view style="flex-basis: 40%;">
						<text>{{$t('income').订单数}}：{{incomeDetail.day_order_num || 0}}{{$t('index').笔}}</text>
					</view>
				</view>
			</view>
			<view v-if="estimateIndex==1">
				<view class="ft12 gray6">
					<text>{{$t('income').本月收益}}({{$store.state.currency=='CNY'?$t('index').元:$t('index').美元}})</text>
				</view>
				<view class="ft24 bold mt5"><text>{{incomeDetail.moon_money |changeCurrency}}</text></view>
				<view class="align-center ft14 gray6 mt10">
					<view style="flex-basis: 60%;">
						<text>{{$t('income').销售额}}：{{ parseFloat(incomeDetail.moon_sell ||0).toLocaleString() }}</text>
					</view>
					<view style="flex-basis: 40%;">
						<text>{{$t('income').订单数}}：{{incomeDetail.moonorder_num || 0}}{{$t('index').笔}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 已结算收益 -->
		<view class="bgWhite plr15 ptb15 radius8 mt12">
			<view class="justify-between align-center bdbe pb15" @click="navTo('/pages/index/income/monthIncome')">
				<view class="ft15 bold  "><text>{{$t('income').已结算收益}}</text></view>
				<image src="../../../static/images/index/right.png" style="width: 10rpx;height: 18rpx;"></image>
			</view>
			<view class="align-center ptb12">
				<view @click="changeSettlement(index,item)" v-for="(item,index) in settlementLists" :key="index"
					:class="{'light bdlight bg9D7':settlementIndex==index}" class="tc bold ptb3 ft12 mr6 gray9 bgF7"
					style="min-width: 140rpx;border-radius: 8rpx;"><text>{{$t('common')[item]}}</text>
				</view>
				<!-- 				<view class="gray9   tc bold ptb2 ft12 bgF7 mr6" style="min-width: 140rpx;border-radius: 8rpx;">
					<text>本月</text>
				</view>
				<view class="gray9 tc bold ptb2 ft12 bgF7" style="min-width: 140rpx;border-radius: 8rpx;">
					<text>累计</text>
				</view> -->
			</view>
			<view v-if="settlementIndex==0">
				<view class="ft12 gray6">
					<text>{{$t('income').今日收益}}({{$store.state.currency=='CNY'?$t('index').元:$t('index').美元}})</text>
				</view>
				<view class="ft24 bold mt5"><text>{{incomeDetail.settl_money |changeCurrency}}</text></view>
				<view class="align-center ft14 gray6 mt10">
					<view style="flex-basis: 60%;">
						<text>{{$t('income').已结算销售额}}：{{parseFloat(incomeDetail.settl_sell||0).toLocaleString() }}</text>
					</view>
					<view style="flex-basis: 40%;">
						<text>{{$t('income').订单数}}：{{incomeDetail.settl_order_num || 0}}{{$t('index').笔}}</text>
					</view>
				</view>
			</view>
			<view v-if="settlementIndex==1">
				<view class="ft12 gray6">
					<text>{{$t('income').本月收益}}({{$store.state.currency=='CNY'?$t('index').元:$t('index').美元}})</text>
				</view>
				<view class="ft24 bold mt5"><text>{{incomeDetail.moon_settl_money |changeCurrency}}</text></view>
				<view class="align-center ft14 gray6 mt10">
					<view style="flex-basis: 60%;">
						<text>{{$t('income').已结算销售额}}：{{parseFloat(incomeDetail.moon_settl_sell||0).toLocaleString()}}</text>
					</view>
					<view style="flex-basis: 40%;">
						<text>{{$t('income').订单数}}：{{incomeDetail.moon_settl_order_num || 0}}{{$t('index').笔}}</text>
					</view>
				</view>
			</view>
			<view v-if="settlementIndex==2">
				<view class="ft12 gray6">
					<text>{{$t('income').累计收益}}({{$store.state.currency=='CNY'?$t('index').元:$t('index').美元}})</text>
				</view>
				<view class="ft24 bold mt5"><text>{{incomeDetail.total_settl_money |changeCurrency}}</text></view>
				<view class="align-center ft14 gray6 mt10">
					<view style="flex-basis: 60%;">
						<text>{{$t('income').已结算销售额}}：{{parseFloat(incomeDetail.total_settl_sell||0).toLocaleString()}}</text>
					</view>
					<view style="flex-basis: 40%;">
						<text>{{$t('income').订单数}}：{{incomeDetail.total_settl_order_num || 0}}{{$t('index').笔}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 预估收益趋势 -->
		<!-- 	<view class="bgWhite plr15 ptb15 radius8 mt12 mb15 w100">
			<view class="ft15 bold pb15 "><text></text></view>
			<view class="charts-box w100">
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData" fontSize="12" />
			</view>
		</view> -->
		<!-- 本月新增销售额趋势 -->
		<view class="ztsj-box mt10">
			<view class="ztsj-head gray3">{{$t('income').预估收益趋势近30天}}</view>
			<view class="charts-box">
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				settlementLists: ['今日', '本月', '累计'],
				settlementIndex: 0,
				estimateLists: ['今日', '本月'],
				estimateIndex: 0,
				chartData: {},
				opts: {
					color: ["#1890FF"],
					padding: [30, 24, 0, 15],
					dataLabel: false,
					// dataPointShape: false,
					dataPointShapeType: 'solid',
					fontSize: 10,
					// enableScroll: true,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						calibration: true,
						// rotateLabel: true,
						// scrollShow: true,
						marginTop: 10,
						// rotateAngle: 45,
						fontSize: 10,
						// itemCount: 10,
						labelCount: 6,
					},
					yAxis: {
						// disabled:true,
						gridType: "dash",
						dashLength: 10,
						showTitle: "true",
						data: [{
							title: "单位:元",
							titleOffsetY: -20,
							axisLine: false,
							textAlign: "right",

						}]
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						},
						tooltip: {
							bgColor: "#333333",
							borderRadius: 4,
							legendShow: false
						}
					}
				},
				incomeDetail: {}, //收益详情
				categories: [], //横坐标数据,
				seriesData: [], //纵坐标数据
			}
		},
		onLoad() {
			this.getincomedetailAPI()
			uni.setNavigationBarTitle({
				title: this.$t('income').收益详情
			})
			let currency = uni.getStorageSync('currency')
			if (currency == 'USD') {
				this.$set(this.opts.yAxis.data[0], 'title', this.$t('common').单位美元)
			} else {
				this.$set(this.opts.yAxis.data[0], 'title', this.$t('common').单位元)
			}
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: this.categories,
						series: [{
							name: this.$t('index').预估收益,
							data: this.seriesData
						}, ],
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			changeSettlement(index, item) {
				this.settlementIndex = index
			},
			changeestimate(index, item) {
				this.estimateIndex = index
			},
			//收益详情
			async getincomedetailAPI() {
				const res = await this.$api.getincomedetail()
				this.incomeDetail = res.data.data
				res.data.list.forEach((item, index) => {
					let newitem = item.date.slice(5).replace("-", "/")
					this.categories.push(newitem)
					if (uni.getStorageSync('currency') == 'USD') {
						this.seriesData.push((item.total_amt_award * uni.getStorageSync('rate')).toFixed(2))
					} else {
						this.seriesData.push(item.total_amt_award)
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	.ztsj-box {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 32rpx;
		margin-bottom: 24rpx;

		.ztsj-head {
			padding: 32rpx 0;
			font-size: 30rpx;
			font-weight: bold;
		}

		.charts-box {
			width: 100%;
			height: 300px;
		}
	}
</style>